<template>
  <div>
    <van-field name="uploader">
      <template #input>
        <van-uploader
          v-model="uploader"
          :before-read="beforeRead"
          :after-read="onReadIdCardback"
          @oversize="onOversize"
        />
      </template>
    </van-field>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      uploader: []
    }
  },
  created() {},
  mounted() {},
  computed: {},
  methods: {
    choiceImg() {
      console.log('子组件', 111)
    },
    //  上传文件格式判定
    beforeRead(file) {
      if (
        file.type === 'image/jpeg' ||
        file.type === 'image/png' ||
        file.type === 'image/jpg'
      ) {
        return true
      }
      this.$toast.fail('请上传正确格式的图片！')
      return false
    },
    // 文件上传大小限制
    onOversize(file) {
      this.$toast.file('图片大小不能超过5M！')
    },
    onReadIdCardback() {
      this.$emit('changedAvatar', this.uploader[0].file)
    }
  }
}
</script>

<style lang="less" scoped>
.van-field {
  width: 80px;
  height: 80px;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
</style>
